<template>
  <div class="box">
    <div class="container">
      <div class="slider-containers">
        <!--effect #1 -->
        <div class="slider-container">
          <h2>Effect #1</h2>
          <div class="flexbox-slider flexbox-slider-1">
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #1 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #2 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #3 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #4 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #5 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--effect #2 -->
        <div class="slider-container">
          <h2>Effect #2</h2>
          <div class="flexbox-slider flexbox-slider-2">
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #1 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #2 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #3 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #4 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #5 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--effect #3 -->
        <div class="slider-container">
          <h2>Effect #3</h2>
          <div class="flexbox-slider flexbox-slider-3">
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #1 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #2 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #3 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #4 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #5 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--effect #4 -->
        <div class="slider-container">
          <h2>Effect #4</h2>
          <div class="flexbox-slider flexbox-slider-4">
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #1 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #2 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #3 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #4 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #5 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--effect #5 -->
        <div class="slider-container">
          <h2>Effect #5</h2>
          <div class="flexbox-slider flexbox-slider-5">
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #1 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #2 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #3 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #4 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
            <div class="flexbox-slide">
              <img
                src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e8816f7e0f3483e811a7c3ab11b7c67~tplv-k3u1fbpfcp-watermark.image"
                alt="Slide Image"
              >
              <div class="text-block">
                <h3>Slide #5 is here</h3>
                <div class="text">
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et
                    justo duo dolores et ea rebum. Stet clita kasd gubergren
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {}
}
</script>

<style lang="scss" scoped>
//variables
$slider-height: 500px;
$text-block-width: 400px;

$dark-font-color: #212121;
$accent-font-color: #ca9ce1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;

@mixin transition-mix(
  $property: all,
  $duration: 0.2s,
  $timing: linear,
  $delay: 0s
) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

@mixin position-absolute($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

/*common styles !!!YOU DON'T NEED THEM */
.div {
  font: {
    family: "Poppins", sans-serif;
    weight: 400;
    size: 17px;
  }
  color: $dark-font-color;
  line-height: 1.4;
}

.container {
  width: 1100px;
  margin: 50px auto 0;
}

.link {
  display: flex;
  justify-content: center;
  width: 800px;
  margin: 30px auto 0;

  a {
    @include transition-mix;

    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 40px;
    color: inherit;
    font: {
      size: inherit;
    }
    text-decoration: none;

    &:hover {
      color: $accent-font-color;
    }

    &:last-child {
      margin-right: 0;
    }

    i {
      color: $accent-font-color;
      margin-right: 9px;
      font-size: 30px;
    }
  }
}

.slider-containers {
  width: 100%;
  margin-top: 60px;
}

.slider-container {
  margin-bottom: 60px;

  h2 {
    text-align: center;
  }
}

.flexbox-slider {
  margin-top: 50px;
}

/*slide styles !!!YOU NEED THEM */
.flexbox-slider {
  display: flex;
  width: 100%;
  height: $slider-height;
  visibility: hidden;

  .flexbox-slide {
    @include transition-mix($duration: 0.3s);

    width: 20%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    visibility: visible;

    //overlay
    &:after {
      @include position-absolute($top: 0, $left: 0);
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
      z-index: 2;

      opacity: 0;
    }

    img {
      @include position-absolute($top: 50%, $left: 50%);
      height: auto;
      width: auto;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    .text-block {
      @include position-absolute($bottom: 30px, $left: 30px);
      max-width: $text-block-width;
      padding: 20px;
      border-radius: 5px;
      background-color: rgba($text-overlay-color, $text-overlay-opacity);
      color: $light-font-color;

      z-index: 4;

      visibility: hidden;
      opacity: 0;

      h3 {
        font: {
          size: 20px;
          weight: 700;
        }
      }
    }
  }

  &:hover {
    .flexbox-slide:hover {
      flex-shrink: 0;
      width: 80%;
    }
  }
}

/* effect 1 styles */
.flexbox-slider.flexbox-slider-1 {
  .flexbox-slide {
    .text-block {
      bottom: 60px;
    }
  }

  &:hover {
    .flexbox-slide:hover {
      .text-block {
        @include transition-mix($delay: 0.5s);
        bottom: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 2 styles */
.flexbox-slider.flexbox-slider-2 {
  .flexbox-slide {
    .text-block {
      left: -60px;
    }
  }

  &:hover {
    .flexbox-slide:not(:hover) {
      &:after {
        @include transition-mix;
        opacity: 1;
      }
    }

    .flexbox-slide:hover {
      .text-block {
        @include transition-mix(
          $delay: 0.5s,
          $timing: cubic-bezier(0, 0, 0, 1.82),
          $duration: 0.3s
        );
        left: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 3 styles */
.flexbox-slider.flexbox-slider-3 {
  .flexbox-slide {
    &:after {
      transform: scale(0.5);
      transform-origin: center center;
    }

    .text-block {
      transform: rotate(-20deg);
    }
  }

  &:hover {
    .flexbox-slide:hover {
      &:after {
        @include transition-mix($delay: 0.4s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }

      .text-block {
        @include transition-mix($delay: 0.6s);
        transform: rotate(0deg);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 4 styles */
.flexbox-slider.flexbox-slider-4 {
  .flexbox-slide {
    &:after {
      top: -100%;
    }

    .text-block {
      transform: scale(1.2);
    }
  }

  &:hover {
    .flexbox-slide:not(:hover) {
      &:after {
        @include transition-mix;
        top: 0;
        opacity: 1;
        visibility: visible;
      }
    }

    .flexbox-slide:hover {
      .text-block {
        @include transition-mix($delay: 0.5s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 5 styles */
.flexbox-slider.flexbox-slider-5 {
  .flexbox-slide {
    .text-block {
      transform: scale(0.85);
    }
  }

  &:hover {
    .flexbox-slide:hover {
      .text-block {
        @include transition-mix($delay: 0.7s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }

      &:after {
        @include transition-mix($delay: 0.4s);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
</style>
